import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Checkbox from '@kuiper-components/checkbox';
import Button from '@kuiper-components/button';
import s from './style.module.css';

export default class Auth extends React.PureComponent {
	static propTypes = {
		className: PropTypes.string,
		target: PropTypes.string,
	};

	static defaultProps = {
		className: '',
	};

	state = {
		check: false,
	};

	handleCheck = e => {
		this.setState({ check: e.target.checked });
	};

	render() {
		const { className, target } = this.props;

		return (
			<div className={cn(className, s.auth)}>
				<div className={s.target}>认证站点：{target}</div>
				<div className={s.step}>
					<div>认证步骤</div>
					<div>
						<div>
							1. 点击
							<span className={s.highLight}>下载认证文件</span>
							，将认证文件下载到本地；
						</div>
						<div>
							2.
							将下载的认证文件上传到网站根目录，请勿修改文件名称和内容；
						</div>
						<div>
							3. 确保能从公网访问该文件；
							<span className={s.highLight}>点击访问</span>;
						</div>
						<div>4. 点击下方“开始验证”按钮开始验证。</div>
					</div>
				</div>
				<div className={s.checkContainer}>
					<Checkbox
						checked={this.state.check}
						onChange={this.handleCheck}
						className={s.checkbox}
					/>
					<span>
						我已经阅读并同意
						<span className={s.highLight}>
							《云监测服务免责说明》
						</span>
					</span>
				</div>
				<div className={s.btnContainer}>
					<Button className={s.btn} size="small">
						取消
					</Button>
					<Button
						className={s.btn}
						primary
						size="small"
						disabled={!this.state.check}
					>
						开始认证
					</Button>
				</div>
			</div>
		);
	}
}
